<template>
  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
    <a-row :gutter="24">
      <a-col :md="24" :lg="7">
        <a-card :bordered="false">
          <div class="account-center-avatarHolder">
            <div class="avatar">
              <img :src="auth.avatar">
            </div>
            <div class="username">{{ auth.nickname }}</div>
          </div>
          <div class="account-center-detail">
            <p>
              <a-icon type="user" /> {{ auth.username || '-' }}
            </p>
            <p>
              <a-icon type="mail" /> {{ auth.email || '-' }}
            </p>
          </div>
          <a-divider/>

          <div class="account-center-roles">
            <div class="rolesTitle"><a-icon type="cluster" /> {{__('角色')}}</div>
            <div>
              <template v-for="(role) in roles">
                <a-tooltip :key="role" :title="role">
                  <a-tag
                    :key="role"
                  >{{ role.length > 20 ? role.slice(0, 20) + '...' : role }}</a-tag>
                </a-tooltip>
              </template>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :md="24" :lg="17">
        <a-card
          style="width:100%"
          :bordered="false"
          :title="__('操作日志')"
        >
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>

export default {
  data () {
    return {
      auth: this.$store.getters.auth && this.$store.getters.auth.auth,
      roles: this.$store.getters.auth && this.$store.getters.auth.auth.roles || []
    }
  }
}
</script>

<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;

  .account-center-avatarHolder {
    text-align: center;
    margin-bottom: 24px;

    & > .avatar {
      margin: 0 auto;
      width: 104px;
      height: 104px;
      margin-bottom: 20px;
      border-radius: 50%;
      overflow: hidden;
      img {
        height: 100%;
        width: 100%;
      }
    }

    .username {
      color: rgba(0, 0, 0, 0.85);
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      margin-bottom: 4px;
    }
  }

  .account-center-detail {
    p {
      margin-bottom: 8px;
      padding-left: 26px;
      position: relative;
    }

    i {
      position: absolute;
      height: 14px;
      width: 14px;
      left: 0;
      top: 4px;
    }

    .title {
      background-position: 0 0;
    }
    .group {
      background-position: 0 -22px;
    }
    .address {
      background-position: 0 -44px;
    }
  }

  .account-center-roles {
    .ant-tag {
      margin-bottom: 8px;
    }
  }

  .rolesTitle {
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 12px;
  }
}
</style>
